<template>
  <!-- 待付款  待发货 取消订单页面 -->
  <view class="content ">
    <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"> </van-nav-bar>
    <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y @scroll="scrollPage" show-scrollbar="false">
      <loading :loadingIsShow="loadingIsShow" v-if="!isrefresher"></loading>
      <view class="bgCart" v-show="!loadingIsShow">
        <view class="cartTop">
          <view class="cartAd">
            <view class="cartAd_title">{{ navBarTitle }}</view>
          </view>
          <view class="userInfo">
            <!-- 有房子 -->
            <view :class="[Number(orderStatus) != 5 && Number(orderStatus) != 7 ? 'userInfo_left':'userInfo_left_closeStatus']" v-if="receivingAddress">
              <view class="user_address" @click="changeAddress(1)">
                <view :class="{'user_address_text': Number(orderStatus) != 5 && Number(orderStatus) != 7,'user_address_text_allShow': Number(orderStatus) == 5 || Number(orderStatus) ==7}">
                  <span v-if="receivingAddress.districtName">{{ receivingAddress.districtName }}</span>{{receivingAddress.houseNumber}}</view>
                <!-- 订单取消后、发货后不显示 -->
                <van-icon name="arrow" size="11" style="margin-left:10px ;" v-if="Number(orderStatus)==4 || Number(orderStatus)==0" />
              </view>
              <view class="userInfo_bottom">
                <text class="userName" style="margin-right: 10px;">{{ receivingAddress.realName }}</text>
                <text class="userTel">{{ receivingAddress.phone }}</text>
              </view>
            </view>
            <!-- 右侧按钮  自提或同城配送 -->
            <view class="userInfo_right deliveryMethod" v-if=" Number(orderStatus) != 5 && Number(orderStatus)!=7">
              <view class="tab-bar gray">
                <view class="tabbar-item" v-if="shippingType=='1'"> 自提 </view>
                <view class="tabbar-item" v-if="shippingType =='2'"> 同城配送 </view>
              </view>
            </view>
          </view>
        </view>
        <!-- <view class="line" v-if="ebUserAddressList.length>0"></view> -->

        <template>
          <!-- 有自提点 -->
          <view class="cart_content self-pickup" v-if="shippingType=='1'">
            <view class="self-pickup-left" @click="toSelectPick">
              <view class="self_pickup_pic">
                <img :src="selfPick.imgUrl ? selfPick.imgUrl : 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/zitiPic.png'" alt="" mode="widthFix"> </view>
              <view class="self_pickup_left_l">
                <view class="left_top"> <text class="self_pickup_name">{{selfPick.merchantName}}</text><text
                    class="distance">距离{{getDistanceText()}}</text>
                </view>
                <view class="left_bottom">营业时间：{{ selfPick.businessHours||'暂无营业时间' }}</view>
              </view>
            </view>
            <view class="self-pickup-right" @tap="toMap()">
              <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/self_pickup.png" alt="" style="width: 16px; height: 16px;">
              <view class="spr_text">当前自提点</view>
            </view>
          </view>

          <!-- 同城配送 -->
          <!-- <view class="cart_content self-pickup city_delivery_content" v-if="shippingType == '2'">
            <view class="city_delivery_content_left" style="width: 85%;" v-if="status == 'unpaid' || orderStatus == 4">
              <view class="left_top"> 立即配送，约10:32送达 </view>
              <view class="left_bottom">商家等待您的下单</view>
            </view>
            <view class="city_delivery_content_left" style="width: 85%;" v-if="status == 'unshipped' || orderSatatus == 0 ">
              <view class="left_top"> 等待同城揽件，预计10:32送达</view>
              <view class="left_bottom">您的订单已出库</view>
            </view>
            <view class="city_delivery_content_left" style="width: 85%;"  v-if="status == 'unreceived' || orderSatatus ==1 ">
              <view class="left_top"> 同城配送中，约10:32送达 </view>
              <view class="left_bottom">您的订单同城配送中</view>
            </view>
            <view class="city_delivery_content_left" style="width: 85%;" v-if="status == 'unreviewed' || Number(orderStatus) == 2">
              <view class="left_top"> 订单已签收，10:32送达 </view>
              <view class="left_bottom">您的订单已签收，请核查</view>
            </view>
            <view class="city-delivery" style="width: 15%;">
              <view class="city_delivery_pic">
                <img v-if="orderStatus == 4" src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/submitOrder.png" alt="" mode="widthFix">
                <img v-if="orderStatus == 0" src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/daifahuo.png" alt=""  mode="widthFix">
                <img v-if="orderStatus == 1 || orderStatus == 10" src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/daishouhuo.png" alt="" mode="widthFix">
                <img v-if="status == 'unreviewed' || Number(orderStatus) == 2" src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/qianshou.png" alt="" mode="widthFix">
              </view>
            </view>
          </view> -->
          <logisticsTimelinessInfo v-if="shippingType == '2'" :orderSatatus="orderSatatus" :shippingType="shippingType" :type="'orderDetails'"></logisticsTimelinessInfo>
        </template>
        <!-- 彩色的线 -->
        <view class="clearfix">
          <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/colorLine.png" alt=""
            style=" display:block; width: 100%; height:3px;" />
        </view>

        <view class="ordeDetailProductInfoList">
          <view class="goodsWraper clearfix"
            :class="{'goodsWraper_border':item.afterSalesStatus&&item.afterSalesStatus!==-1 }"
            v-for="(item,index) in ordeDetailProductInfoList" :key="index" :id="item.productId">
            <view class="wraper_left" @tap="toGoodsDetail(item, index)">
                <!-- <view class="productInfo_box"> -->
                    <view class="goodsPic"> <img class="img" :src="item.imgUrl" mode="widthFix" /> </view>
                    <view class="goodsText">
                      <view class="goodsText_top">
                        <view class="goodsTop">
                          <view class="goods_T">{{ item.productName }}</view>
                          <!-- <view class="goods_price">￥{{ item.price }}</view> -->
                          <view class="goods_price">X {{ item.buyNum }}</view>
                        </view>
                        <view class="googsMiddle">
                          <view class="goods_specs">{{ item.specName?item.specName : '默认' }}</view>
                          <!-- <view class="goods_num">X {{ item.num }}</view> -->
                        </view>
                      </view>
                      <view class="goodsBottom goodsText_bottom">
                        <view class="jifen_box"> <span v-if="item.productPrice && item.productPrice!=='0' "
                            style="margin-right: 16rpx;">￥{{ item.productPrice }}</span>
                          <!-- <span v-if="item.productPrice && item.productPrice!=='0'&&item.maxUsefulPoints && item.maxUsefulPoints !=='0'">+ </span>  -->
                          <span v-if="item.maxUsefulPoints && item.maxUsefulPoints !=='0'"><img
                              src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/jinbi_gray1127.png"
                              alt="" style="height: 10px; width: 10px;margin-left: 6px;margin-right: 6px;" />
                            {{ item.maxUsefulPoints }}</span>
                        </view>
                        <!-- <view class="money">￥{{ item.money }}</view> -->
                      </view>
                    </view>
                <!-- </view> -->
            </view>
            <view class="detailsBtnArea t28 pb30"
              v-if="item.afterSalesStatus !== -1 || (item.afterSalesStatus==1|| item.afterSalesStatus==2 || item.afterSalesStatus==3)">
              <view class="btnAreaLeft"></view>
              <view class="btnAreaRight">
                <button type="default" v-if="item.afterSalesStatus==1" plain class="blackBlackBtn" @click="toAfterSaleProcessDetail(item)">退款中</button>
                <button type="default" v-if="item.afterSalesStatus==2" plain class="blackBlackBtn" @click="toAfterSaleProcessDetail(item)">退款成功</button>
                <button type="default" v-if="item.afterSalesStatus==3" plain class="blackBlackBtn" @click="toAfterSaleProcessDetail(item)">退款关闭</button>
              </view>
            </view>
          </view>
          <template v-if="Number(orderStatus) !== 4">
            <!-- 待发货时可以修改地址 -->
            <view class="detailsBtnArea" v-if="Number(orderStatus) == 0">
              <view class="btnAreaLeft"></view>
              <view class="btnAreaRight">
                <button type="default" plain class="blackBlackBtn r12" @click="changeAddress(0)">修改地址</button>
                <button type="default" plain class="blackBlackBtn" @click="checkLogistics">查看物流</button>
              </view>
            </view>
            <!-- 已发货、待收货  可以看物流  与确认收货 -->
            <view class="detailsBtnArea" v-if="Number(orderStatus) == 1 || Number(orderStatus) == 10">
              <view class="btnAreaLeft"></view>
              <view class="btnAreaRight">
                <button type="default" plain style="margin-right:10px ;" class="blackBlackBtn r12"  @click="checkLogistics">查看物流</button>
                <button type="default" plain class="blackBlackBtn" @click="openReceived">确认收货</button>
              </view>
            </view>
            <!-- 已确认收货 进入待评价 -->
            <view class="detailsBtnArea" v-if="Number(orderStatus) == 2">
                <view class="btnAreaLeft"></view>
                <view class="btnAreaRight">
                  <button type="default" plain style="margin-right:10px ;" class="blackBlackBtn r12" @click="checkLogistics">查看物流</button>
                  <button type="default" plain class="blackBlackBtn" @click="toJudege">去评价</button>
              </view>
            </view>
            <!-- 已完成 + 申请售后成功 -->
            <view class="detailsBtnArea" v-if="Number(orderStatus) == 3">
                <view class="btnAreaLeft"></view>
                <view class="btnAreaRight">
                  <button type="default" plain class="blackBlackBtn" :class="{'r12': (Number(orderStatus) == 3 && isCommentFollowups && isCommentFollowups==1)}" @click="checkLogistics()" v-if="Number(orderStatus) == 7 || Number(orderStatus) == 3">查看物流</button>
                  <button type="default" plain class="blackBlackBtn" @click="toFollowUpJudege()" v-if="Number(orderStatus) == 3 && isCommentFollowups && isCommentFollowups==1">去追评</button>
                </view>
            </view>
          </template>
        </view>
        <!-- <view class="line_two" style="height: 5px;"></view> -->
        <!-- <view class="line"></view> -->
        <orderInfo :orderInfo="orderInfo" :orderStatus="orderStatus"></orderInfo>

      </view>
    </scroll-view>
    <view class="bottom pageBottomBtnArea" v-if="Number(orderStatus) !==4 && !loadingIsShow">
      <view class="service-o-icon">
        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/kefu.png" alt="">
      </view>
      <view style="display: flex;justify-content: space-between; width: calc(100% - 196rpx );">
        <button type="default" plain style="margin: 0px;" class="grayBtn" @click="onApply()"
          v-if="Number(orderStatus)==1|| Number(orderStatus) == 10 || (Number(orderStatus)==2 && !isAllApplied)|| Number(orderStatus) == 3">申请售后</button>
        <button type="default" plain style="margin: 0px;" class="grayBtn" @click="cancelBtn" v-if="Number(orderStatus)==0">取消订单</button>
        <button type="default" plain style="margin: 0px;" class="grayBtn" @click="delBtn" v-if="Number(orderStatus)==5 || Number(orderStatus)==7">删除订单</button>
        <button plain type="waring" class="orangeBtn" @click="addToCart">再来一单</button>
      </view>
    </view>
    <!-- 待付款 -->
    <view class="bottom bottomBtnArea pageBottomBtnArea" v-if="Number(orderStatus)==4 && !loadingIsShow"
      style="height: 144rpx;">
      <button type="default" plain style="margin: 0px; padding: 0 34rpx;" class="button"
        @click="cancelBtn">取消订单</button>
      <view class="checkoutBtn" :class="{ disabled: isTimeout }" @click="toPayment">付款 <text
          style="margin-left: 10px;">{{ formatRemainingTime }}</text> </view>
    </view>

    <!-- <van-toast id="van-toast" /> -->
    <van-dialog id="van-dialog" confirm-button-color='#ff6203' />
    <myHouse :show="myHouse" :house="house" @closeHouse="closeMyHouse" @submitEditAddress="submitEditAddress"
      :pageBiaoshi="source" :ebUserAddressList="ebUserAddressList" :order-id="params.orderId"
      :addressInfo="receivingAddress" pageBiaoshi="orderDetails"></myHouse>
    <paymentPopup :show="paymentShow" @closePayment="closePayment"></paymentPopup>
    <cancelOrder :show="cancelPopup" @closeCancelPopup="closeCancelPopup" :orderId="params.orderId" :orderType="orderType"></cancelOrder>
    <applyAfterSales :show="showAfterSale" @closeApply="closeApplyPopup" :orderId="orderId"
      :orderDetailIdList="orderDetailIdList" :ordeDetailProductInfoList="ordeDetailProductInfoList"
      :sourceType="sourceType" :refundType="refundType" :afterSalesType="afterSalesType"></applyAfterSales>
    <is-shouhuo-popup :show="isShouhuo" @closeShouhuo="closeShouhuo" @confirmShouhuo="confirmShouhuo" :orderId="orderId"></is-shouhuo-popup>

  </view>
</template>

<script>
import { SOURCE_TYPE } from '@/utils/constant'
import Dialog from '@/wxcomponents/vant/dialog/dialog'
import { calculateDistance, formatDistanceText } from '@/utils/distanceUtils'
import isShouhuoPopup from '@/mycomponents/shangcheng/isShouhuoPopup.vue'
import myHouse from '@/mycomponents/myHouse.vue'
import paymentPopup from '@/mycomponents/shangcheng/paymentPopup.vue'
import cancelOrder from '@/mycomponents/shangcheng/cancelOrder.vue'
import applyAfterSales from '@/mycomponents/shangcheng/applyAfterSales.vue'
import {getOrderDetailApi,deleteOrderApi,modifyOrderAddressApi,batchAddToShoppingCartApi,cancelOrderApi,getAfterSalesOrderValidityApi} from '@/api/order'
import { addToShoppingCartApi } from '@/api/shoppingCart'
// import {getUserAddressApi} from '@/api/mine'
import loading from '@/mycomponents/loading.vue'
import orderInfo from '@/mycomponents/shangcheng/orderInfo.vue'
import logisticsTimelinessInfo from '@/mycomponents/shangcheng/logisticsTimelinessInfo.vue'

export default {

    components: {
        isShouhuoPopup,
        myHouse,
        paymentPopup,
        cancelOrder,
        applyAfterSales,
        orderInfo,
        loading,
        logisticsTimelinessInfo
    },
    name: 'Cart',
    data () {
        return {
            isrefresher: false,
            loadingIsShow: true,
            loadingIsShowPage: true,
            navBarTitle: '订单详情',
            scrolling: false, // 顶部区域吸顶效果
            showHouseName: false, // 切换房子的列表
            ebUserAddressList: [],
            myHouse: false,
            house: 0, // 有无房屋
            currentIndex: 0, // 配送方式的tab
            deliveryMethod: 'ziti',
            shippingType:'1', // 配送方式 1：自提  2：同城配送
            tabBarList: [
                {
                    name: '自提',
                    key: 'ziti'
                },
                {
                    name: '同城配送',
                    key: 'tongcheng'
                }
            ],
            userName: '王彤美',
            userTel: '15236236547',
            receivingAddress:null, //页面显示的用户地址 收货地址
            businessHours: '09:00-19:00', // 营业时间
            selfPickupName: '有',
            ordeDetailProductInfoList: [],
            fullDiscount:undefined, //满减活动
            coupon:undefined, //优惠券
            myCouponShow: false, // 优惠券弹窗
            paymentShow: false, // 支付方式选择弹窗
            showAfterSale:false, //申请售后
            freight: '10', // 是否显示运费 运费金额
            params: {}, // 路由传参
            isApply: false, // 申请售后
            cancelPopup: false, // 取消订单
            isCancel: false, // 是否已经取消
            isPay: false, // 是否已经支付
            isSend: false, // 是否已经发货
            isReceived: false, // 已确认收货
            isJudge: false,
            payAmount: undefined, //支付金额
            payPoints: undefined, //支付使用积分
            totalAmount: undefined, // 订单总金额
            countdownText: '',
            countdown: 0,
            startTime: '',

            totalSeconds: 24 * 60 * 60 * 1000, // 总秒数，初始化为30分钟对应的秒数
            remainingTime: '', // 存储倒计时剩余时间的字符串表示
            timer: null, // 定时器引用，用于每秒更新倒计时
            source:SOURCE_TYPE.ORDER_DETAIL,//来源类型
            status:'unpaid', //订单状态
            orderStatus:'4', //订单状态-1:全部订单; 0：待发货；1：待收货；2：已收货，待评价；3：已完成；4:待付款 5: 已取消  6: 待使用
            wxUserBaseInfo:{}, //用户信息
            productId:undefined, //订单中商品id
            selectSuk:undefined,//订单中商品的规格
            productAttrValueId:undefined, //订单中商品的规格id
            commentId:undefined, //追评时 需要的原评论id
            isCommentFollowups:undefined, //是否有追评 1:有 0:没有
            canApply:false, //是否可以申请售后
            orderNo: '1254121144441', // 订单编号
            orderId:undefined,
            orderDetailIdList:[],
            orderTime: 'undefined', // 下单时间
            orderType:undefined,// 商品类型  0=商品订单 1=服务订单
            sourceType:'orderDetails',// 来源类型  orderDetails=订单详情页
            selfPick:null,
            addressId:undefined,
            refundType:undefined,
            isShouhuo:false,
            orderInfo:{},//订单的部分信息   传到子组件
            afterSalesType:1, // 售后类型1=退货退款, 2=退款, 3=其他 4=服务退款
            isAllApplied:false, //是否全部售后
            pageSourceType:undefined, //页面来源类型 只有支付成功页面跳过来才会有

        }
    },

    computed: {
        formatRemainingTime () {
            if (this.remainingTime <= 0 || isNaN(this.remainingTime)) {
                return '00:00:00'
            }
            const hours = Math.floor(this.remainingTime / (1000 * 60 * 60))
            const minutes = Math.floor((this.remainingTime % (1000 * 60 * 60)) / (1000 * 60))
            const seconds = Math.floor((this.remainingTime % (1000 * 60)) / 1000)

            return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
        },
        isTimeout() {
          return this.remainingTime <= 0;
        }
    },

    watch: {
        ebUserAddressList: {
            immediate: true, // 这句重要
            handler (v) {
                console.log(v, v.length, 'ebUserAddressList -- detail')
                if (v.length > 0) {
                    this.house = 0 // 有房子
                } else {
                    this.house = 1 // 没房子
                    this.selfPickupName = ''
                    this.receivingAddress = null // 清空地址显示
                }
            }
        },
        foundEleMerchant: {
            handler(newVal) {
              console.log('商户信息更新:', newVal);
              this.$forceUpdate(); // 强制更新视图
            },
            deep: true
        },
        formatRemainingTime: {
            handler(newVal) {
                if (newVal == '00:00:01' || newVal == '00:01') {
                    this.cancelOrderWhenTimeout();
                }
            },
            immediate: false // 不立即执行
        }
    },
    onLoad (data) {
        if (data) {
          console.log(data, 'data')
          if (data.params) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log(this.params, 'params')
            this.source = this.params.source || SOURCE_TYPE.ORDER_DETAIL // 设置默认来源类型
            this.status = this.params.status   //unpaid  cancel unshipped unreceived unreviewed
            this.orderStatus = this.params.orderStatus
            this.orderNo = this.params.orderNo || undefined
            this.orderId = this.params.orderId || undefined
            this.myHouse = this.params.myHouse || false
            this.pageSourceType = this.params.pageSourceType || undefined
           uni.setStorage({
              key: 'pageSource',
              data: this.source
            });
            console.log(this.orderId, 'orderId-----', this.orderId = this.params.orderId)
            console.log(this.params.orderStatus, this.orderStatus == '0')
          }else{
            this.orderId = data?.orderId || undefined
          }

          this.onRefresherMethod()
        }
    },

    onReady () {
      this.startCountdown()
    },
    onShow(){
      console.log(this.source, 'source',this.pageSourceType,'pageSourceType')
       // 监听自定义事件
       uni.$on('selfPickupUpdate', (merchant) => {
            console.log('自提点已更新:', merchant);
            if(merchant) {
                this.selfPick = merchant;
                console.log('自提点已更新:', this.selfPick,merchant.merchantName);
                this.selfPickId = merchant.id;
                this.getOrderDetail(this.orderId,this.addressId,this.selfPickId,true)    
            }
        });
    },
    onUnload() {
        // 移除事件监听
        uni.$off('selfPickupUpdate');
    },
    beforeDestroy () {
        if (this.timer) {
            clearInterval(this.timer)
        }
    },
    methods: {
      // 页面左上角返回按钮
      onClickLeft() {
        console.log(this.source, 'source',this.pageSourceType,'pageSourceType')
        if(!this.source){
          this.source=SOURCE_TYPE.ORDER
        }
        const returnMap = {
          [SOURCE_TYPE.CART]: '/pages/shoppingCart/gouwuche',
          [SOURCE_TYPE.ORDER]: '/pages/orders/myOrder',
          [SOURCE_TYPE.PROMOTION]: '/pages/activity/promotionDetail',
          [SOURCE_TYPE.DETAIL]: '/pages/shangcheng/goodsDetail',
          [SOURCE_TYPE.DEFAULT]: '/pages/orders/myOrder',
          [SOURCE_TYPE.SEARCH_ORDER]: '/pages/orders/searchOrder',
          [SOURCE_TYPE.ORDER_DETAIL]: '/pages/orders/orderDetails',
          // [SOURCE_TYPE.ORDER_LIST]: '/pages/orders/myOrder',
          // [SOURCE_TYPE.ORDER_CANCEL]: '/pages/orders/myOrder',
        };
        const targetSource = this.source || SOURCE_TYPE.DEFAULT;
        const targetUrl = returnMap[targetSource] || SOURCE_TYPE.DEFAULT;
        uni.setStorage({
          key: 'pageSource',
          data: this.source
        });

        const params = {
          source: targetSource,
          isPay: this.paymentStatus == 'SUCCESS',
          orderId: this.orderId,
          productId: this.productId,
          status: 'paid',
          orderStatus: -1 //-1:全部订单; 0：待发货；1：待收货；2：已收货，待评价；3：已完成；4:待付款；5：退款
        }
        // const pages = getCurrentPages();
        // const prevRoute = pages.length > 1 ? pages[pages.length - 2].route : '';
    
        const fullUrl = `${targetUrl}?params=${encodeURIComponent(JSON.stringify(params))}`;
        // 清除页面栈后跳转
        if (this.source == SOURCE_TYPE.SEARCH_ORDER) {
          uni.navigateBack()
        }else if (this.source == SOURCE_TYPE.ORDER) {
          if(this.pageSourceType == 'paySuccess'){
            uni.redirectTo({ url: fullUrl });
          }else{
            uni.navigateBack()
          }
        }else if (this.source == SOURCE_TYPE.ORDER_DETAIL){
          if(this.pageSourceType == 'paySuccess'){
            uni.redirectTo({ url: '/pages/orders/myOrder'});
          }
        }else{
          uni.redirectTo({ url: fullUrl });
        }

      },
      // 滑动页面
      scrollPage(e) {
        console.log(e.detail.scrollTop, this.scrolling)
        if (e.detail.scrollTop > 25 && !this.scrolling) {
          this.scrolling = true
        } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
          this.scrolling = false
        }
      },

       onRefresherMethod() {
            if (!this.isrefresher) {
              this.loadingIsShow = true
            }
            Promise.all([this.getOrderDetail(this.orderId) ]).then(() => {
              console.log('所有api加载完成')
              this.loadingIsShow = false
              this.loadingIsShowPage = false
              // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
              this.time = setTimeout(e => {
                this.isrefresher = false
              }, 200)
            })
        },
      

      // 商品详情
      toGoodsDetail(item, index) {
        const params = {}
        params.item = item
        params.id = item.productId
        params.biaozhi = 'oderDetail'
        uni.navigateTo({
          url: '/pages/shangcheng/goodsDetail?params=' + encodeURIComponent(JSON.stringify(params)) })
      },

      // 地址选择框
      changeAddress(val) {
        console.log(val, 'val-----', this.orderStatus)

        if (Number(this.orderStatus) !== 4 && Number(this.orderStatus)  !== 0) {
          return false
        }
        this.house = val
        this.myHouse = true
      },

      //确认修改地址
      submitEditAddress(addressId) {
        console.log(addressId, 'addressId')
        this.getOrderDetail(this.params.orderId, addressId, true)
      },
      closeMyHouse() {
        console.log('关闭 关闭关闭-------1111')
        this.myHouse = false
      },

      getOrderStatus(orderStatus) {

      },
      // 复制
      copytext(text) {
        var that = this
        uni.setClipboardData({
          data: text,
          success: function (res) {
            uni.showToast({
              title: '复制成功',
              icon: 'success',
              duration: 2000
            })
          }
        })
      },

      // 优惠券
      openMyCoupon() {
        this.myCouponShow = true
      },
      // 关闭优惠券
      closeMyCoupon() {
        this.myCouponShow = false
      },
      // 支付方式
      openPayment() {
        this.paymentShow = true
      },
      // 关闭支付方式选择弹窗
      closePayment() {
        this.paymentShow = false
      },

      // 跳转自提点选择页面
      toSelectPick() {
        if (Number(this.orderStatus)  !== 4 && Number(this.orderStatus)  !== 0) {
          return
        }
        const addressId = this.receivingAddress.id
        const params = {
          userAdderssDefault: this.receivingAddress,
          addressId: addressId,
          foundEleMerchant: this.selfPick,
          distance: this.getDistanceText(),
          pageSource: 'orderDetails',
          orderId: this.orderId,

        }
        uni.navigateTo({
          url:
            '/pages/shoppingCart/selfPickupPoint?params=' +
            encodeURIComponent(JSON.stringify(params))
        })
      },

      // 取消订单  打开取消订单的弹窗
      cancelBtn() {
        if (this.isTimeout && Number(this.orderStatus)  == 4) {
          return false
        }
        this.cancelPopup = true
      },

      // 关闭取消订单弹窗
      closeCancelPopup(isCancel, sign) {
        console.log(isCancel, 'isCancel', sign)
        this.isCancel = isCancel
        this.cancelPopup = false

        if (sign == 'submit') {
          this.getOrderDetail(this.orderId)
        }

      },

      // 查看物流
      checkLogistics() {
        console.log('查看物流')
        const params = {
          orderId: this.orderId,
          orderStatus: this.orderStatus,
        }
        uni.navigateTo({ url: '/pages/orders/logisticsDetail?params=' + encodeURIComponent(JSON.stringify(params)) })
      },

      // 确认付款的按钮  （待付款页面） 跳转收银台
      toPayment() {
        if (this.isTimeout && Number(this.orderStatus)  == 4) {
          return false
        }
        const params = {
          pageSymbol: 'orderDetails',
          orderId: this.orderId,  //订单id
          totalAmount: this.payAmount,  //订单需支付总金额
          orderNo: this.orderNo, //订单号
          source: this.source,
        }

        uni.navigateTo({
          url: '/pages/payment/cashPage?params=' +
            encodeURIComponent(JSON.stringify(params))
        })
      },

      // 删除订单
      delBtn() {
          Dialog.confirm({
            message: '确认删除记录'
          }).then(() => {
            deleteOrderApi(this.orderId).then(res => {
              console.log(res, '删除订单')
              if (res.code == 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success',
                  duration: 2000
                })
                uni.redirectTo({
                  url: '/pages/orders/myOrder'
                })
              }
            })
          })
          .catch(() => {
            console.log('cancel')
          })
      },


      // 确认收货
      openReceived () {
          console.log(this.orderId, 'openCheckShouhuo')
          this.isShouhuo = true
      },
      // 关闭batchInOrOutList弹窗
      closeShouhuo(){
          this.isShouhuo=false
      },
      // batchInOrOutList弹窗确认按钮
      async confirmShouhuo(item){
          this.isShouhuo=false
          console.log(item,'confirmShouhuo')
          this.getOrderDetail(this.orderId)
      },

      // 去评价
      toJudege() {
          const params ={
              source:this.source,
              orderId:this.orderId,
              orderType:this.orderType,
              productInfoList : this.ordeDetailProductInfoList
          }
          uni.navigateTo({
            url: '/pages/userJudges/sendJudge?params=' +
            encodeURIComponent(JSON.stringify(params))
          })
      },

      // 去追评
      toFollowUpJudege(item){
        const params = {
          source:this.source,
          orderId:this.orderId,
          orderType:this.orderType,
          productInfoList : this.ordeDetailProductInfoList,
          commentId:this.commentId,
        }

        uni.navigateTo({
          url: '/pages/userJudges/followUpJudge?params=' +
          encodeURIComponent(JSON.stringify(params))
        })
      },
      // 再来一单 订单里面只有一个商品时
      // buyAgain () {
      //     const params = {
      //         cartId: undefined,
      //         cartNum:this.ordeDetailProductInfoList.length === 1 ?  this.ordeDetailProductInfoList[0].buyNum:1,
      //         orderId: this.params.orderId,
      //         cartType: "NORMAL",
      //         // source: SOURCE_TYPE.ORDER
      //         productId: this.productId,
      //         selectSuk : this.selectSuk, //订单中商品选择的规格  再来一单时 要选同样的规格
      //         showSpecsPopup : true,
      //         productAttrValueId:this.productAttrValueId
      //     }
      //     const addToCartParams = {
      //         cartId: undefined,
      //         cartNum: this.ordeDetailProductInfoList.length === 1 ?  this.ordeDetailProductInfoList[0].buyNum:1,
      //         cartType: "NORMAL",
      //         // combinationId: 0,
      //         productAttrValueId: this.productAttrValueId,
      //         productId: this.productId,
      //         selected: true
      //     }
      //     addToShoppingCartApi(params).then((res) => {
      //         if (res.code === 200) {
      //           wx.showToast({
      //             title: '加入购物车成功',
      //             icon: 'none',
      //             duration: 2000
      //           })
      //           uni.navigateTo({
      //             url: '/pages/shoppingCart/gouwuche?params=' +
      //               encodeURIComponent(JSON.stringify(params))
      //           })
      //         }
      //     })

      // },
      // 计入购物车   待付款订单
      async addToCart(item) {
        console.log(item, 'addToCart')
        const params = {
          orderId: item.orderId,
          showSpecsPopup: true,
        }
        const cartParams = this.ordeDetailProductInfoList.map(product => ({
          cartId: undefined,
          cartNum: product.buyNum,  // 使用每个商品自己的购买数量
          cartType: "NORMAL",
          productAttrValueId: product.productAttrValueId,
          productId: product.productId,
          selected: true
        })
        )
        console.log(cartParams, 'addToCart')
        const res = await batchAddToShoppingCartApi(cartParams)
        if (res.code == 200) {
          uni.navigateTo({
            url: '/pages/shoppingCart/gouwuche?params=' +
              encodeURIComponent(JSON.stringify(params))
          })
          wx.showToast({
            title: '加入购物车成功',
            icon: 'none',
            duration: 2000
          })
        }

      },
      // 申请售后
      onApply() {
        getAfterSalesOrderValidityApi(this.orderId).then(res=>{
          console.log(res,'getAfterSalesOrderValidityApi')
          if(res.code==200){
            this.canApply = true
            this.isAllApplied = this.ordeDetailProductInfoList.every(
              item => item.afterSalesStatus && item.afterSalesStatus !== -1 && item.afterSalesStatus !== 3
            );
            if (this.isAllApplied) {
              Dialog.confirm({
                message: '抱歉，您订单中的商品已全部申请售后，暂无可申请商品',
                confirmButtonText: '联系客服',
                cancelButtonText: '取消',
                confirmButtonColor: '#ff6203',
                cancelButtonColor: '#888'
              }).then(() => {
                // 联系客服逻辑
                uni.makePhoneCall({
                  phoneNumber: '400-123-4567' // 替换为真实客服电话
                });
              }).catch(() => {
                // 取消操作
              });
            } else {
              // 待收货 （已签收 退货退款   未签收 退款）
              // 待评价 （退货退款）
              this.refundType = this.orderStatus == 1 ? '2' : '1'  //退款类型 1=退货退款, 2=退款,
              this.afterSalesType = this.orderStatus == 1? 2 : 1  // 售后类型1=退货退款, 2=退款, 3=其他 4=服务退款
              console.log('申请售后', this.orderStatus, this.refundType)
              this.showAfterSale = true
            }
          }else {
            this.canApply = false
             // 抱歉，您的订单已于2015年02月10日超过售后申请时效
             Dialog.confirm({
                message: '抱歉，您的订单已于'+res.data?res.data:res.message+'超过售后申请时效',
                confirmButtonText: '联系客服',
                cancelButtonText: '取消',
                confirmButtonColor: '#ff6203',
                cancelButtonColor: '#888'
              }).then(() => {
                // 联系客服逻辑
                uni.makePhoneCall({
                  phoneNumber: '400-123-4567' // 替换为真实客服电话
                });
              }).catch(() => {
              });
          }
        }).catch(err => {
          console.error('申请售后验证失败:', err)
          this.canApply = false
        })
      },

      closeApplyPopup() {
        this.showAfterSale = false
      },

      
      // 查看售后详情
      toAfterSaleProcessDetail(item){
          const params = {
            orderId:this.orderId,
            orderStatus:this.orderStatus,
            afterSalesId:item.afterSalesId,
            afterSalesType:this.orderStatus ==1 ? 2 :1
          }
          uni.navigateTo({
            url: '/pages/orders/refundOrderDetail?params=' +
            encodeURIComponent(JSON.stringify(params))
          })
        },

      toMap() {
        console.log(this.selfPick, 'self')
        const params = {
          merchantLocation: {
            latitude: this.selfPick.latitude,
            longitude: this.selfPick.longitude
          },
          userLocation: {
            latitude: this.receivingAddress.latitude,
            longitude: this.receivingAddress.longitude
          }
        }
        uni.navigateTo({ url: '/pages/shoppingCart/map?params=' + encodeURIComponent(JSON.stringify(params)) })
      },
      // 倒计时方法
      handleTimeout() {
        this.status = 'close'
        // this.navBarTitle = '交易关闭'
        this.isCancel = true
        this.apply = true
        clearInterval(this.timer)
      },
      // 修改倒计时方法
      startCountdown() {
        const THIRTY_MINUTES = 30 * 60 * 1000
        const currentorderTime = this.orderTime.replace(/-/g, '/')
        console.log(currentorderTime, 'currentorderTime')
        if (!currentorderTime) {
          console.error('orderTime is undefined')
          return
        }
        const orderTimestamp = new Date(currentorderTime).getTime()
        const endTimestamp = orderTimestamp + THIRTY_MINUTES
        // 添加时间有效性验证
        if (isNaN(orderTimestamp) || orderTimestamp <= 0) {
          console.error('Invalid orderTime:', this.orderTime)
          return
        }
        // 立即执行一次时间判断
        const checkTimeout = () => {
          const now = Date.now()

          this.remainingTime = endTimestamp - now

          if (this.remainingTime <= 0) {
            this.handleTimeout()
            clearInterval(this.timer)
          }
        }
        // 先执行一次立即检查
        checkTimeout()
        // 设置定时器
        this.timer = setInterval(checkTimeout, 1000)
      },
      /**
       * 接口
       */
      // 获取订单详情
      getOrderDetail(orderId, addressId, selfPickId, changeAll) {
        console.log(orderId, 'orderId', addressId, 'addressId')
        return new Promise((resolve, reject) => {
          getOrderDetailApi(orderId).then(res => {
            console.log(res, '订单详情')
            if (res.code == 200) {
              this.ordeDetailProductInfoList = res?.data?.ordeDetailProductInfoList || []
              this.productId = this.ordeDetailProductInfoList[0]?.productId || undefined  //再来一单按钮需要用到
              this.selectSuk = this.ordeDetailProductInfoList[0]?.specName || undefined  //再来一单按钮需要用到
              this.productAttrValueId = this.ordeDetailProductInfoList[0]?.productAttrValueId || undefined  //再来一单按钮需要用到
              this.orderDetailIdList = this.ordeDetailProductInfoList.map(item => item.orderDetailId)
              console.log(this.orderDetailIdList, 'orderDetailIdList')
              this.freight = res?.data?.freight || 0
              this.orderNo = res.data.orderNo || undefined
              this.orderTime = res.data.orderTime || undefined
              this.payPoints = res.data.payPoints || '0'
              this.payAmount = res.data.payAmount || '0'
              this.totalAmount = res.data.totalAmount || '0'
              this.fullDiscount = res.data.fullDiscount || undefined //满减活动
              this.coupon = res.data.coupon || undefined //优惠券
              const shippingType = res.data.shippingType
              this.shippingType = shippingType
              this.orderStatus = res.data.orderStatus || this.orderStatus //订单状态-1:全部订单; 0：待发货；1：待收货；2：已收货，待评价；3：已完成；4:待付款 5: 已取消  6: 待使用
              this.wxUserBaseInfo = res.data.wxUserBaseInfoResponse || {}
              this.ebUserAddressList = this.wxUserBaseInfo.ebUserAddressList || []

              this.addressId = res.data.addressId // 新增：更新addressId
              // 新增：根据addressId设置receivingAddress
              if (addressId) {
                this.receivingAddress = this.ebUserAddressList.find(item => item.id == addressId)
                // 若未找到且列表不为空，取默认地址或第一个地址
                if (!this.receivingAddress && this.ebUserAddressList.length > 0) {
                  this.receivingAddress = this.ebUserAddressList.find(item => item.isDefault) || this.ebUserAddressList[0];
                }
                this.addressId = addressId
              } else {
                this.receivingAddress = this.ebUserAddressList.find(item => item.id == this.addressId)
                // 若未找到且列表不为空，取默认地址或第一个地址
                if (!this.receivingAddress && this.ebUserAddressList.length > 0) {
                  this.receivingAddress = this.ebUserAddressList.find(item => item.isDefault) || this.ebUserAddressList[0];
                }
              }
              // const targetAddress = this.ebUserAddressList.find(item => (item.isDefault === 1 || item.isDefault == true)) || this.ebUserAddressList[0] // 查找isDefault为1的地址
              // const changeAddress = this.ebUserAddressList.find(item => item.id == addressId) // 查找修改的地址
              // console.log(targetAddress,'targetAddress',changeAddress,'changeAddress',addressId,'addressId',this.receivingAddress,'receivingAddress')
              // this.receivingAddress = (!addressId && !this.receivingAddress)? targetAddress : (addressId ? changeAddress : this.receivingAddress) // 新增：取第一个地址 或者默认地址

              if (!selfPickId) {
                this.selfPick = res.data?.selfPick || null
              }
              this.orderType = res.data?.orderType || 0 //商品类型
              this.isCommentFollowups = res.data?.isCommentFollowups || 0 //是否显示有追评按钮
              this.commentId = res.data?.commentId || undefined //评价过的有评价id    追评需要

              this.orderInfo= {
                orderId: res.data?.orderId,
                orderNo: res.data?.orderNo,
                orderTime: res.data?.orderTime,
                payPoints: res.data?.payPoints || 0,
                payAmount: res.data?.payAmount || 0,
                totalAmount: res?.data?.totalAmount || 0,
                fullDiscount: res.data?.fullDiscount || undefined,
                coupon: res?.data?.coupon|| undefined,
                shippingType: res?.data?.shippingType || '1',
                orderStatus: res.data?.orderStatus,
                wxUserBaseInfo: res.data?.wxUserBaseInfoResponse || {},
                freight:res?.data?.freight || 0,
                orderType: res.data?.orderType || 0,
              }
              if (Number(this.orderStatus)  == 4 && res.data.countdownTime !== '00:00:00' && res.data.countdownTime !== '00:00:01' && res.data.countdownTime !== '00:01' && res.data.countdownTime !== '00:00') {
                // 新增时间判断逻辑
                const THIRTY_MINUTES = 30 * 60 * 1000
                const rawDate = res.data.orderTime
                const currentorderTime = rawDate.replace(/-/g, '/')
                console.log(currentorderTime, 'currentorderTime')
                const orderTime = new Date(currentorderTime).getTime()
                console.log(orderTime, 'orderTime')
                const currentTime = Date.now()

                // 立即判断是否超时
                if (currentTime - orderTime > THIRTY_MINUTES) {
                  this.status = 'close'
                  this.orderStatus = 5
                  this.isCancel = true
                  this.cancelOrderWhenTimeout()
                  return  // 直接返回不启动倒计时
                }
                // 只有未超时才启动倒计时
                this.startCountdown()
              } else if (Number(this.orderStatus)  == 4 && (res.data.countdownTime == '00:01' || res.data.countdownTime == '00:00:01' || res.data.countdownTime == '00:00:00' || res.data.countdownTime == '00:00')) {
                this.cancelOrderWhenTimeout()
              }
              // 是否已经全部申请售后  且售后未关闭
              this.isAllApplied = this.ordeDetailProductInfoList.every(
                item => item.afterSalesStatus && item.afterSalesStatus !== -1 && item.afterSalesStatus !== 3
              );
              resolve(res)
            } else {
              reject(res)
            }
          }).catch(error => {
              console.error('获取订单详情失败:', error);
          })
        })
      },

      async cancelOrderWhenTimeout() {
        try {
          const res = await cancelOrderApi(this.orderId);
          console.log(res, '取消订单');
          if (res.code == 200) {
            this.getOrderDetail(this.orderId);
          } else {
            console.error('取消订单失败');
          }
        } catch (error) {
          console.error('调用取消订单接口出错', error);
        }
      },
      // 修改后的距离显示方法
      getDistanceText() {
        if (!this.selfPick || !this.receivingAddress) return '距离计算中';

        try {
          const merchantLat = parseFloat(this.selfPick.latitude);
          const merchantLng = parseFloat(this.selfPick.longitude);
          const userLat = parseFloat(this.receivingAddress.latitude);
          const userLng = parseFloat(this.receivingAddress.longitude);

          if (isNaN(merchantLat) || isNaN(merchantLng) ||
            isNaN(userLat) || isNaN(userLng)) return '未知距离';

          const distance = calculateDistance(
            merchantLat, merchantLng,
            userLat, userLng
          );

          return formatDistanceText(distance);
        } catch (e) {
          console.error('距离计算错误:', e);
          return '未知距离';
        }
      },
      // // 获取地址列表
      // getUserAddress() {
      //   getUserAddressApi().then(res => {
      //     console.log(res, '获取用户地址')
      //     if (res.code == 200) {
      //       this.ebUserAddressList = res.data || []
      //     }
      //   })
      // },

    }

}
</script>
  <style lang="scss" scoped>
  // @import '@/styles/variables.scss';

  .content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    z-index: -2;
    background-color: #FFFFFF;
  }

  .bgCart {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #f9f9f9;
    height: 100vh;
  }

  // 滚动
  .scroll-content {
    flex: 1;
    height: 1px;
  }

  .cartTop {
    background-color: #ffffff;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 25px;

    // 页面标题部分
    .cartAd {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .cartAd_title {
      font-size: 60rpx;
      text-align: left;
      line-height: 60rpx;
      color: #111111;
    }

    .userInfo {
      margin-top: 25px;
      display: flex;
      justify-content: space-between;
      padding-bottom: 23px;

    }

    .userInfo_left {
      //左边用户信息
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // align-items: center;
      width: 75%;
    }

    .userInfo_left_closeStatus {
      //左边用户信息
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // align-items: center;
      width: 100%;
    }

    .user_address {
      //住址
      font-size: 28rpx;
      text-align: left;
      color: #737373;
      width: 100%;
      display: flex;
      align-items: center;
    }

    .user_address_text {
      max-width: 75%;
      white-space: nowrap;
      /* 防止文本换行 */
      overflow: hidden;
      /* 超出部分隐藏 */
      text-overflow: ellipsis;
      /* 显示省略号 */
    }

    .userInfo_bottom {
      font-size: 28rpx;
      text-align: left;
      color: #737373;
      line-height: 28rpx;
      margin-top: 13px;

    }

    .userInfo_right {
      float: right;
      text-align: right;
    }

  }

  // 配送方方式
  .tab-bar {
    padding: 0px 2px;
    // width: 112px;
    height: 20px;
    // background: #F0F0F0;
    // border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // 日月周统计

  //自提  同城配送
  .gray {
    // padding:2px;
    height: 20px;

    // border-radius: 10px;
    .tabbar-item {
      // flex: auto;
      z-index: 1;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      font-size: 24rpx;
      background: #FF6203;
      border-radius: 10px;
      padding: 0px 12px;
      color: #ffffff;

    }
  }

  // 标题下面的横线
  .line {
    height: 9px;
    width: 100%;
    background: #f9f9f9;
  }

  // 自提点
  .self-pickup {
    margin-top: 10px;
    padding: 24px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  // 有自提点的内容
  .self-pickup-left {
    width: 75%;
    display: flex;

    .self_pickup_pic {
      width: 20%;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;

      img {
        width: 100%;
        height: auto;
      }
    }

    // 图片右边的文字
    .self_pickup_left_l {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 70%;
      margin-left: 15px;

      .left_top {
        font-size: 22rpx;
        text-align: left;

        .self_pickup_name {
          color: #737373;
          margin-right: 7px;
        }

        .distance {
          color: #FF6203;
        }
      }

      .left_bottom {
        font-size: 22rpx;
        text-align: left;
        color: #737373;
      }
    }

  }

  .self-pickup-right {
    display: flex;

    .spr_text {
      margin-left: 8px;
      font-size: 22rpx;
      text-align: left;
      color: #888888;
    }
  }

  // 同城配送
  .city_delivery_content {
    display: flex;
    align-items: center;

    .city_delivery_content_left {
      width: 85%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      .left_top {
        font-size: 28rpx;
        text-align: left;
      }

      .left_bottom {
        font-size: 22rpx;
        text-align: left;
        color: #737373;
      }
    }

    .city-delivery {
      width: 15%;

      .city_delivery_pic {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }

  // 无自提点
  .no-self-pickup {
    font-weight: bolder;
    font-size: 28rpx;
    text-align: left;
    color: #FF6203;
  }

  .ordeDetailProductInfoList {
    padding: 48rpx;
    width: calc(100% - 96rpx);
    background-color: #ffffff;
  }

  .goodsWraper {
    display: flex;
    // justify-content: space-between;
    // align-items: center;
    flex-direction: column;
    width: 100%;
    margin-bottom: 30rpx;
  }

  .goodsWraper:last-child {
    margin-bottom: 0px;
    border-bottom: none;
  }

  .goodsWraper_border {
    border-bottom: 1px solid #e5e5e5;
  }
  // .wraper_top {
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-between;
  //   margin-bottom: 16px;

  //   .listTopLeft{
  //       color: #737373;
  //       font-size: 28rpx;
  //       line-height: 28rpx;
  //   }
  //   .listTopRight{
  //       color: #FF6203 ;
  //       font-size: 24rpx;
  //       line-height: 24rpx;
  //   }
  // }
  .wraper_left {
    display: flex;
    width: 100%;

    .productInfo_box {
      display: flex;
      width: 100%;
    }

    .goodsPic {
      // width: 33%;
      width: 212rpx;
      height: 212rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;

      img {
        // width: 100%;
        // height: auto;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
      }
    }

    .goodsText {
      position: relative;
      // width: 67%;
      width: calc(100% - 240rpx);
      margin-left: 28rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 16rpx;
      padding-bottom: 16rpx;
      text-align: left;

      .goodsTop {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .goods_T {
          font-size: 28rpx;
          text-align: left;
          color: #111111;
          max-width: 80%;
          line-height: 28rpx;
          // margin-top: 9px;  //display：flex   中 元素居中
          white-space: nowrap;
          /* 防止文本换行 */
          overflow: hidden;
          /* 超出部分隐藏 */
          text-overflow: ellipsis;
          /* 显示省略号 */

        }

        // 商品价格
        .goods_price {
          font-size: 28rpx;
          color: #737373;
          line-height: 28rpx;
        }
      }

      .googsMiddle {
        margin-top: 24rpx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 22rpx;
        color: #666666;

        .goods_specs {
          max-width: 80%;
          font-size: 22rpx;
          text-align: left;
          color: #666666;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
        }

        .goods_num {
          font-size: 22rpx;
          line-height: 22rpx;
          color: #666666;
        }

      }

      .goodsBottom {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .money {
          font-size: 28rpx;
          text-align: left;
          color: #737373;
          line-height: 28rpx;
        }

        .jifen_box {
          font-size: 28rpx;
          text-align: left;
          color: #999999;
          line-height: 28rpx;
          height: 28rpx;
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .wraper_left :last-child {
    margin-bottom: 0px;
  }


  .wraper_right {
    font-size: 22rpx;
    color: #666666;
    width: 10%;
    text-align: right;
  }

  // 页面所有按钮
  // 商品或服务下方的的按钮区域
  .detailsBtnArea {
    // float: right;
    display: flex;
    justify-content: space-between;
    height: 62rpx;
    align-items: center;

    .btnAreaLeft {
      color: #888888;
      font-size: 22rpx;
      line-height: 22rpx;
      width: 20rpx;
    }

    .btnAreaRight {
      display: flex;
      justify-content: space-between;
    }
  }

  // 黑字黑框按钮
  .blackBlackBtn {
    background-color: #Ffffff;
    border-radius: 38px;
    font-size: 28rpx;
    text-align: center;
    color: #111111;
    height: 62rpx;
    line-height: 60rpx;
    border: 1px solid #111111;
    padding-left: 10px;
    padding-right: 10px;
    min-width: 162rpx;
  }

  // 已付款的其他状态按钮区域
  .pageBottomBtnArea {
    padding-top: 48rpx;
    padding-bottom: calc(48rpx + env(safe-area-inset-bottom));
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  // 未付款页面底部的按钮
  .bottomBtnArea {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f9f9f9;
    background-color: #ffffff;
    padding-bottom: 20px;
    padding-left: 24px;
    padding-right: 24px;
    width: calc(100% - 48px);
  }

  // 付款按钮
  .checkoutBtn {
    background-color: #FF6203;
    border-radius: 38px;
    font-size: 28rpx;
    text-align: center;
    color: #FFFFFF;
    height: 62rpx;
    line-height: 60rpx;
    padding-left: 50px;
    padding-right: 50px;
    width: 35%;
  }

  .checkoutBtn.disabled {
    background-color: #cccccc !important;
    color: #ffffff !important;
    pointer-events: none;
  }

  .button {
    background-color: #Ffffff;
    border-radius: 38px;
    font-size: 28rpx;
    text-align: center;
    color: #111111;
    height: 62rpx;
    line-height: 60rpx;
    border: 1px solid #D4D4D4 !important;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 12px;
  }

  .checkBtn {
    border: 1px solid #FF6203 !important;
    background-color: transparent;
    border-radius: 38px;
    font-size: 28rpx;
    text-align: center;
    color: #FF6203 !important;
    height: 62rpx;
    line-height: 60rpx;
    padding-left: 13px;
    padding-right: 13px;
  }

  button {
    border: none;
  }

  .grayBtn {
    background-color: #Ffffff;
    border-radius: 38px;
    font-size: 28rpx;
    text-align: center;
    color: #111111;
    height: 62rpx;
    line-height: 60rpx;
    border: 1px solid #D4D4D4 !important;
    width: 45%;
  }

  .orangeBtn {
    background-color: #FF6203;
    border: none;
    border-radius: 38px;
    font-size: 28rpx;
    text-align: center;
    color: #FFFFFF;
    height: 62rpx;
    line-height: 60rpx;
    width: 45%;
  }

  .orangeBtn button[plain] {
    border: none
  }

  //防止父元素高度塌陷
  .clearfix::before .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }

  .line_two {
    height: 5px;
    width: 100%;
    background: #f9f9f9;
    line-height: 5px;
  }

  // 价格明细
  .price_detail {
    padding: 24px 24px 108px 24px;
    background-color: #ffffff;
    margin-top: 10px;

    .price_detail_content {
      border-bottom: 1px solid #f9f9f9;
      padding-bottom: 20px;
    }

    .price_detail_content_noBorder {
      border: none;
      border-bottom: 0rpx;
    }

    .price_detail_title {
      font-size: 40rpx;
      text-align: left;
      color: #111111;
    }

    .price_detail_box {
      margin-top: 17px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .num {
      font-size: 28rpx;
      text-align: right;
      color: #111111;
    }

    .num_o {
      font-size: 28rpx;
      text-align: right;
      color: #FF6203;
    }

    // 实付金额
    .payment {
      padding: 24px 0px;

    }

  }

  .service-o-icon {
    width: 96rpx;
    height: 62rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 45rpx;
      height: 45rpx;
    }

  }

  ::v-deep .service-o-icon .van-icon {
    font-size: 44rpx !important;
    color: #000000 !important;
  }

  // 很多地方字体 颜色公用
  .price_detail_name {
    font-size: 28rpx;
    line-height: 28rpx;
    text-align: left;
    color: #111111;
  }

  .price_detail_tips {
    font-size: 24rpx;
    text-align: left;
    color: #666666;
    margin-top: 5px;
  }

  .checked-img {
    height: 16px;
    width: 16px;
  }

  .payment_top {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .paidAmount {
      font-size: 32rpx;
      color: #111111;
      line-height: 32rpx;
      display: flex;
      align-items: center;
    }
  }

  .order_Detail {
    padding-bottom: 100px;
  }

  // 订单编号
  .order_Detail_box {
    margin-top: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;

  }

  .order_detail_num {
    display: flex;
    align-items: center;
  }

  .code {
    font-size: 24rpx;
    text-align: right;
    color: #888888;
    line-height: 24rpx;
  }

  .copy {
    font-size: 24rpx;
    text-align: right;
    color: #111111;
    line-height: 24rpx;
  }

  ::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
  }

  ::v-deep .van-icon {
    color: #242629 !important;
  }

  ::v-deep .van-nav-bar__title {
    font-size: 28rpx;
    color: #333333;
  }

  .bottom {
    border-top: 1px solid #f9f9f9;
  }

  ::v-deep .van-button--warning {
    background-color: #FF6203;
  }

  ::v-deep .van-icon-success {
    color: #ffffff !important;
  }

  // 组件规格  底部的线
  ::v-deep .van-goods-action,
  .van-goods-action--safe {
    border-top: 1px solid #f9f9f9 !important;
  }

  ::v-deep .van-submit-bar__bar {
    display: flex;
    justify-content: space-between !important;
    border-top: 1px solid #f9f9f9;
    padding-top: 32rpx !important;
  }

  ::v-deep .disabledSubmit .van-button--danger,
  .van-button--disabled,
  .van-button--unclickable {
    background-color: #D4D4D4 !important;
    border: 1px solid #D4D4D4 !important;
  }

  // ::v-deep
  // 向右的箭头
  .van-icon-arrow {
    color: #666666 !important;
  }

  .r12 {
    margin-right: 12px;
  }

  .t28 {
    margin-top: 28rpx;
  }

  .pb30 {
    padding-bottom: 30rpx;
  }

  ::v-deep .van-radio__icon--checked {
    background-color: #FF6203 !important;
    border-color: #FF6203 !important;
  }
</style>
